<template>
  <div class="container">
    <search-bar></search-bar>
    <div class="box">
      <div class="result-box">
        <radio-group></radio-group>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="相关性" name="first">
            <search-result-box
              ref="relevanceBox"
              :searchType="searchType[0]"
              :pageItems="relevanceSearchData"
              :total="total"
              :query="searchKeyWord"
              @get-relevance-search-data="getRelevanceSearchData($event)"
            ></search-result-box>
          </el-tab-pane>
          <el-tab-pane label="下载量" name="second">
            <search-result-box
              :searchType="searchType[1]"
              :pageItems="downloadSearchData"
              :total="total"
              :query="searchKeyWord"
              @get-download-search-data="getDownloadSearchData($event)"
            >
            </search-result-box>
          </el-tab-pane>
          <el-tab-pane label="最新" name="third"
            ><search-result-box
              :searchType="searchType[2]"
              :pageItems="timeSearchData"
              :total="total"
              :query="searchKeyWord"
              @get-time-search-data="getTimeSearchData($event)"
            >
            </search-result-box
          ></el-tab-pane>
        </el-tabs>
      </div>
      <search-recommend
        :keyWord="searchKeyWord"
        :items="searchRecommendData"
      ></search-recommend>
    </div>
  </div>
</template>

<script>
import {
  postRelevanceSearchData,
  postDownloadSearchData,
  postTimeSearchData,
  postSearchRecommend,
} from "@/api/search/search";
import SearchBar from "@/components/Frame/SearchBar/SearchBar.vue";
import RadioGroup from "@/components/Search/Select/RadioGroup.vue";
import SearchResultBox from "@/components/Search/Result/Box/SearchResultBox.vue";
import SearchRecommend from "@/components/Search/Recommend/SearchRecommend.vue";
export default {
  components: { SearchBar, SearchResultBox, SearchRecommend, RadioGroup },
  inject: ["reload"],
  watch: {
    "$route.query.keyWord": function () {
      // this.reload();
    },
  },
  data() {
    return {
      userid:1,
      searchType: ["relevance", "download", "time"],
      activeName: "first",
      searchKeyWord: "",
      oldKeyWord: "",
      total: 0,
      relevanceSearchData: [],
      downloadSearchData: [],
      timeSearchData: [],
      searchRecommendData: [],
    };
  },
  methods: {
    //选项卡切换时发相应请求
    handleClick(tab) {
      if (tab.name == "first") this.getRelevanceSearchData();
      else if (tab.name == "second") this.getDownloadSearchData();
      else this.getTimeSearchData();
    },
    //获取推荐
    getSearchRecommendData() {
      let data = {
        from: 0,
        size: 12,
        userId: this.userid,
      };
      let body = JSON.stringify(data);
      console.log(data)
      postSearchRecommend(body).then((res) => {
        this.searchRecommendData = res.result.myFiles;
      });
    },
    //三种请求
    getRelevanceSearchData(page) {
      let data = {
        userId: this.userid,
        query: this.searchKeyWord,
        from: (page - 1) * 12,
        size: 12,
      };
      let body = JSON.stringify(data);
      console.log(data)
      postRelevanceSearchData(body).then((res) => {
        this.relevanceSearchData = res.result.myFiles;
        this.total = res.result.total;
      });
    },
    getDownloadSearchData(page) {
      let data = {
        userId: this.userid,
        query: this.searchKeyWord,
        from: (page - 1) * 12,
        size: 12,
      };
      let body = JSON.stringify(data);
      console.log(data)
      postDownloadSearchData(body).then((res) => {
        this.downloadSearchData = res.result.myFiles;
        this.total = res.result.total;
      });
    },
    getTimeSearchData(page) {
      let data = {
        userId: this.userid,
        query: this.searchKeyWord,
        from: (page - 1) * 12,
        size: 12,
      };
      let body = JSON.stringify(data);
      console.log(data)
      postTimeSearchData(body).then((res) => {
        this.timeSearchData = res.result.myFiles;
        this.total = res.result.total;
      });
    },
  },
  created() {
    this.userid = localStorage.userId;
    this.searchKeyWord = this.$route.query.keyWord;
    this.getSearchRecommendData();
    this.getRelevanceSearchData();
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
  box-sizing: border-box;
  background-image: url("@/assets/image/common/background/background.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
}
.box {
  margin-top: 64px;
  min-height: 320px;
  width: 80em;
  padding-top: 48px;
  padding-left: 64px;
  text-align: left;
  box-sizing: border-box;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
}
.result-box {
  width: 760px;
  min-height: 320px;
  display: inline-block;
  vertical-align: top;
}
:deep(.el-tabs__nav-wrap.is-top::after) {
  display: none;
}
:deep(.el-tabs__item.is-top) {
  font-size: 18px;
  color: #a3a6a4;
}
:deep(.el-tabs__item.is-top.is-active) {
  font-weight: bold;
  color: #005a95;
  border: none;
}
:deep(.el-tabs__active-bar.is-top) {
  background-color: #005a95;
  height: 3px;
  bottom: 3px;
}
:deep(.el-tabs__item:focus.is-active.is-focus:not(:active)) {
  box-shadow: 0 0;
  border-radius: 0;
}
</style>
